const path = require('path');
const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
var ROOT_PATH = path.resolve(__dirname);
module.exports = {
    entry: path.join(__dirname,'./src/index.js'),

    //入口
    output:{
        path:path.join(__dirname,'./dist'),//输出目录
        filename:'index.js'//文件的名称
    },
    //这是配置 dev-server 命令参数的第二种形式
    devServer:{
        open:true,
        port:3000,
        contentBase: 'src',
        hot:true
    },
    plugins:[
        new VueLoaderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new htmlWebpackPlugin({
            template:path.join(__dirname,'./src/index.html'),//将页面加载到内存中
            filename:'index.html',
        }),
        // new webpack.ProvidePlugin({
        //     mui: "mui",
        //     "window.mui": "mui"
        // })
    ],
    module:{
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader']},//css
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},//less
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},//sass
            {test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=7631&name=[hash:8]-[name].[ext]'},//图片
            {test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' },//字体图标
            {test: /\.js$/, use: 'babel-loader',exclude: /node_modules/},//Babel
            {test: /\.vue$/, use: 'vue-loader' }//vue
        ]
    },
    resolve:{
        alias:{
            'vue$':'vue/dist/vue.js',
        }
    }
}